<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MSG : Event Data</title>
   <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/resources/dojo.css" />
   <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/Grid.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/document.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/claroGrid.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/enhanced/resources/claroEnhancedGrid.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/enhanced/resources/EnhancedGrid.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" /> 
  <link rel="stylesheet" type="text/css" href="msg.css" />
</head>
 
<body class="claro">
<div>
		<table align="center">
			<tr>
				<td><img src="images/NYLiberty.png" width="160" height="90" /></td>
				
				<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<td>
					<table>
						<tr>
							<td><font size="7" face="times new roman" color="#FFFFFF">New York Liberty</font></td>
						</tr>
						
						<tr>
						
							<td align="right"><font size="3" color="#FFFFFF">Ticket	Sales & Forecast</font></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<img src="images/White_square.png" width="100%" height="1" />
		<br><br/>
			</div>
 <div id="content">
<!-- Blue Menu -->
		<div id="menu_wrapper" class="blue" >
	 	<div class="left"></div>
			<ul id="menu" >
				<li><a href="/msgSp12/index.html">Upload File</a></li>
				<li><a href="/msgSp12/tGrid.html">TICKET DATA</a></li>
				<li><a href="/msgSp12/fGrid.html">Forecast</a></li>
				<li><a href="/msgSp12/sfGrid.html">Season Forecast</a></li>
				<li class="active"><a href="/msgSp12/sGrid.html">Season Data</a></li>
				<li><a href="/msgSp12/pGrid.html">Price Data</a></li>
				<li><a href="/msgSp12/tgGrid.html">Ticket Group</a></li>
				<li><a href="/msgSp12/TicketsChart.html">CHART VIEW</a>
					<ul>
						<li><a href="/msgSp12/TicketsChart.html">Ticket Sale</a></li>
						<li><a href="/msgSp12/ForecastChart.html">Ticket Forecast</a></li>
					</ul>
				</li>
			</ul>
		</div>

<script type="text/javascript"
        src="http://o.aolcdn.com/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad:true">
</script>
 
<script type="text/javascript">

dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojo.io.iframe");
dojo.require("dojox.grid.enhanced.plugins.exporter.CSVWriter");
//dojo.require("dojox.grid._grid.publicEvents");

var layout = [
              { name : "TICKET LEVEL", field: "Ticket_Level", datatype:"string" , width :"260px"},
              { name : "TICKET GROUP" , field: "Ticket_Group", datatype:"string", width :"260px"},
              { name : "SOLD SEATS" , field: "Sold_Seats", datatype:"number",
                  // Declare that we need the ComboBox for suggestions (autoComplete by default)
                  autoComplete: true, width :"260px"
              },
              { name : "TOTAL AMOUNT" , field: "Total_Amount",editable: true, datatype:"number",
                  // Declare that we need the ComboBox for suggestions (autoComplete by default)
                  autoComplete: true, width :"260px"
              },
              { name : "% OF LEVEL CAPACITY" ,field: "Percentage_Capacity", datatype:"number",
                  // Declare that we need the ComboBox for suggestions
            	  autoComplete: true, width :"260px"
              },
           ];
           

	dojo.ready(function() {
		var xhrArgs = {
			sync : false,
			url : "http://localhost/msgSp12/ActionController",
			handleAs : "json",
			content : {
				requestAction : "season",
				season : "ALL"
			},
			load : fillCombo,
			error : function(error) {
			}
		};
		dojo.xhrPost(xhrArgs);
		createGrid()

	});
	
	function createGrid() {
		var grid = new dojox.grid.EnhancedGrid({
			id : 'grid',
			structure : layout,
			plugins : {
				exporter: true,
				filter : {
					closeFilterbarButton : true,
					ruleCount : 5,
					itemsName : "Events"
				}
			}
		});
		grid.placeAt('gridContainer');
		grid.startup();
		
		dojo.connect( grid, "onApplyCellEdit", function(val, inRow, col) {
	        if( null !== grid.getItem( inRow.index ) ) {
	            item = grid.getItem( inRow );
	            alert(item.toString())
	            item.customStyles += "color:green;";
	         }
	    }   );
		
	
		
		
	/* 	dojo.connect(grid,"onApplyCellEdit", function( val, row, col )
	               {
			
			 item = grid.getItem( row);
	            
			 row.customStyles += "color:green;";
			 grid.focus.styleRow(row);
			 grid.edit.styleRow(row);
	        
			
			
	                          alert(  item );
	}); */
	}
	function exportAll() {
		 
		var strall = dijit.byId("grid").exportGrid("csv", function(str) {
			 var form = document.createElement('form');
			dojo.attr(form, 'method', 'POST');
			document.body.appendChild(form);
			dojo.io.iframe.send({
				url : "http://localhost/msgSp12/CSVController",
				form : form,
				method : "POST",
				content : {
					exp : str ,
					type : "Season",
					action : "CSV"
				},
			});
			document.body.removeChild(form); 
		});
		
	};
	function exportSelected() {
		 var str = dijit.byId("grid").exportSelected("csv");
		//dojo.byId("output").value = str; 
		 var form = document.createElement('form');
			dojo.attr(form, 'method', 'POST');
			document.body.appendChild(form);
			dojo.io.iframe.send({
				url : "http://localhost/msgSp12/CSVController",
				form : form,
				method : "POST",
				content : {
					exp : str ,
					type : "Season",
					action : "CSV"
				},
			});
			document.body.removeChild(form); 

	};  
	function fillCombo(data) {
		var store = new dojo.data.ItemFileReadStore({
			data : data	});
		
		var select = new dijit.form.ComboBox({
			name : "EventCombo",
			placeHolder : "SELECT SEASON",
			store : store,
			searchAttr : "season",
			onChange : function() {
						var selSeason = dijit.byId("SeasonCombo").get("value");
						var xhrArgs = {
							sync : false,
							url : "http://localhost/msgSp12/ActionController",
							handleAs : "json",
							content : {
								requestAction : "season",
								season : selSeason
							},
							load : fillGrid,
							error : function(error) {
							}
						};
						dojo.xhrPost(xhrArgs);
			}
		}, "SeasonCombo");
		select.startup();

	}
	function fillGrid(data) {
		var store = new dojo.data.ItemFileWriteStore({
			data : data
		});
			var grid = dijit.byId("grid");
		grid.setStore(store);
	}

</script>
<div id="comboContainer">
<table align="center">

<tr>
<td><label for="Season"><b>SELECT SEASON </b> </label></td>
<td> <div id="SeasonCombo" ></div></td>
</tr>


</table>

</div>
 <div id="gridContainer" ></div>
    <div> &nbsp;&nbsp;
    </div>
    <center>
  <button onclick="exportAll()"><b>Export all to CSV</b></button>
<button onclick="exportSelected()"><b>Export Selected Rows to CSV</b></button> 
</center>
<div id="footer">
        | Copyright © 2012 Team MSG | sp12_msg@cs.nyu.edu | XHTML | CSS | All rights reserved |
    </div>
</div>    
</body>
</html>